<template>
  <div class="charts_shadow relative" :style="{width:`${innerWidth*.363}px`}" style="height: 100%">
    <div class="until_title_charts">每日在线设备情况</div>
    <div style="position: absolute;top: 5px;" ref="chartDOM" :style="{width:`${innerWidth*.363}px`, height:'190px'}">
    </div>
  </div>
</template>

<script>
  import mixin from './../mixin'
  import { mapGetters } from 'vuex'
  export default {
    name: 'online_device',
    mixins: [mixin],
    data () {
      return {
        chartDate: [],
        chartArr: ''
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    watch: {
      currentUser () {
        if (this.currentUser.mid) {
          this.getOnlineEquipmentNum()
        }
      }
    },
    mounted () {
      this.init()
      this.getOnlineEquipmentNum()
    },
    methods: {
      init () {
        let arr = this.chartDate.map((item, index) => {
          let towerCraneNum = item.towerCraneNum === undefined ? 0 : item.towerCraneNum
          let elevatorNum = item.elevatorNum === undefined ? 0 : item.elevatorNum
          return towerCraneNum + elevatorNum
        })
        let chart = this.$echarts.init(this.$refs.chartDOM)
        let option = {
          legend: {
            data: [{name: '塔吊', icon: 'rect'},
                   {name: '升降机', icon: 'rect'}],
            // align: 'right',
            right: 20,
            itemWidth: 16,
            itemHeight: 16,
            textStyle: {
              color: '#a9c5ec'
            },
            selectedMode: false
          },
          tooltip: {},
          xAxis: {
            data: this.chartDate.map((item, index) => {
              return item.reportDate
            }),
            silent: false,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitArea: {show: false},
            axisLabel: {
              color: '#a9c5ec' // 坐标轴文字颜色
            },
            axisLine: {  //  Y轴颜色
              onZero: true,
              lineStyle: {
                color: '#275a71',
                width: 2
              }
            }
          },
          yAxis: {
            name: '单位: 台',
            splitArea: {show: false},
            nameTextStyle: {
              color: '#a9c5ec',
              align: 'left',
              padding: [0, 0, 0, 5]
            },
            // interval: 1,
            axisLabel: {
              color: '#a9c5ec'
            },
            axisLine: {  //  Y轴颜色
              lineStyle: {
                color: '#275a71',
                width: 2 //  这里是为了突出显示加上的
              },
              textStyle: {
                color: '#a9c5ec'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#275a71'
              }
            },
            axisTick: {
              show: false
            },
            splitNumber: 4,
            minInterval: 1
          },
          grid: {
            top: 70,
            left: 46,
            right: 20,
            bottom: 20
            // left: 'center'
          },
          series: [
            {
              name: '升降机',
              type: 'bar',
              stack: 'one',
              itemStyle: {
                color: '#04ddef'
              },
              data: this.chartDate.map((item, index) => {
                return item.elevatorNum
              }),
              label: {
                show: true,
                position: 'outside',
                color: '#a9c5ec'
              },
              barMaxWidth: 15
            },
            {
              name: '塔吊',
              type: 'bar',
              stack: 'one',
              itemStyle: {
                color: '#1975a4'
              },
              data: this.chartDate.map((item, index) => {
                return item.towerCraneNum
              }),
              label: {
                show: true,
                position: 'outside',
                color: '#a9c5ec',
                formatter: (param) => {
                  return arr[param.dataIndex]
                }
              },
              barMaxWidth: 15
            }
          ]
        }
        chart.setOption(option)
      },
      unInit () {
        let arr = []
        let chart = this.$echarts.init(this.$refs.chartDOM)
        let option = {
          legend: {
            data: [{name: '塔吊', icon: 'rect'},
                   {name: '升降机', icon: 'rect'}],
            // align: 'right',
            right: 50,
            itemWidth: 16,
            itemHeight: 16,
            textStyle: {
              color: '#a9c5ec'
            }
          },
          tooltip: {},
          xAxis: {
            data: [],
            silent: false,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitArea: {show: false},
            axisLabel: {
              color: '#a9c5ec' // 坐标轴文字颜色
            },
            axisLine: {  //  Y轴颜色
              onZero: true,
              lineStyle: {
                color: '#275a71',
                width: 2
              }
            }
          },
          yAxis: {
            name: '单位: 台',
            splitArea: {show: false},
            nameTextStyle: {
              color: '#a9c5ec'
            },
            // interval: 1,
            axisLabel: {
              color: '#a9c5ec'
            },
            axisLine: {  //  Y轴颜色
              lineStyle: {
                color: '#275a71',
                width: 2 //  这里是为了突出显示加上的
              },
              textStyle: {
                color: '#a9c5ec'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#275a71'
              }
            },
            axisTick: {
              show: false
            },
            splitNumber: 4,
            minInterval: 1
          },
          grid: {
            top: 70,
            left: 46,
            right: 46,
            bottom: 70
            // left: 'center'
          },
          series: [
            {
              name: '升降机',
              type: 'bar',
              stack: 'one',
              itemStyle: {
                color: '#04ddef'
              },
              data: [],
              barMaxWidth: 15
            },
            {
              name: '塔吊',
              type: 'bar',
              stack: 'one',
              itemStyle: {
                color: '#1975a4'
              },
              data: [],
              label: {
                show: true,
                position: 'outside',
                formatter: (param) => {
                  return arr[param.dataIndex]
                }
              },
              barMaxWidth: 15
            }
          ]
        }
        chart.setOption(option)
      },
      getOnlineEquipmentNum () {
        let data = {
          stageId: this.currentUser.stageId,
          dateTime: this.currentUser.dateTime
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/panorama/getOnlineEquipmentNum`,
          data: this.$qs.stringify(data)
        }).then(res => {
          if (!res.data.data) {
            this.unInit()
            return
          }
          let data = res.data.data
          this.chartDate = []
          data.forEach((item) => {
            let arr = {}
            Object.assign(arr, {'reportDate': item.reportDate})
            data.forEach((item) => {
              if (item.reportDate === arr.reportDate) {
                if (item.towerCraneNum) {
                  Object.assign(arr, {'towerCraneNum': item.towerCraneNum})
                }
                if (item.elevatorNum) {
                  Object.assign(arr, {'elevatorNum': item.elevatorNum})
                }
              }
            })
            this.chartDate.push(arr)
          })
          this.deleRepeat()
        })
      },
      deleRepeat () {
        let hash = {}
        this.chartDate = this.chartDate.reduce(function (item, next) {
          hash[next.reportDate] ? '' : hash[next.reportDate] = true && item.push(next)
          return item
        }, [])
        this.chartDate.sort((b, a) => {
          return Date.parse(b.reportDate) - Date.parse(a.reportDate)      // 时间正序
        })
        this.chartDate.forEach((item) => {
          item.reportDate = (this.$moment(item.reportDate).get('month') + 1) + '-' + this.$moment(item.reportDate).get('date')
        })
        this.init()
      }
    }
  }
</script>

